<template>
    <div class='preview-singleChoice'>
        <!-- 信息区域 -->
        <div class="singleChoice-header">
            <div class="information">
                <span>【题型】</span>:
                <span v-if="previewData.questionType==1">单选</span>
                <span v-else-if="previewData.questionType==2">多选</span>
                <span v-else>简单</span>
            </div>
            <div class="information">
                <span>【编号】</span>:<span>{{previewData.id}}</span>
            </div>
            <div class="information">
                <span>【难度】</span>:
                <span v-if="previewData.difficulty==1">简单</span>
                <span v-else-if="previewData.difficulty==2">一般</span>
                <span v-else>困难</span>
            </div>
            <div class="information">
                <span>【标签】</span>:<span>{{previewData.tags}}</span>
            </div>
            <div class="information">
                <span>【学科】</span>:<span>{{previewData.subject}}</span>
            </div>
            <div class="information">
                <span>【目录】</span>:<span>{{previewData.catalog}}</span>
            </div>
            <div class="information">
                <span>【方向】</span>:<span>{{previewData.direction}}</span>
            </div>
        </div>

        <!-- 分割线 -->
        <el-divider></el-divider>

        <!-- 题干 -->
        <div class="information">
            <span>【题干】</span>:<span v-html="previewData.question" style="color:#88f"></span>
        </div>

        <!-- 单选题 -->
        <div v-if="previewData.questionType == 1">
            <span>单选题 选项 : (以下选中的选项为正确答案)</span>
            <div>
                <el-radio v-model="radio" label="1">1</el-radio>
                <el-radio v-model="radio" label="2">2</el-radio>
                <el-radio v-model="radio" label="3">3</el-radio>
                <el-radio v-model="radio" label="4">4</el-radio>
            </div>
        </div>

        <!-- 多选 -->
        <div v-else-if="previewData.questionType == 2">
            <span>多选题 选项 : (以下选中的选项为正确答案)</span>
            <div>
                <el-checkbox v-model="checked1">河北</el-checkbox>
                <el-checkbox v-model="checked2">天津</el-checkbox>
                <el-checkbox v-model="checked3">内蒙</el-checkbox>
                <el-checkbox v-model="checked4">辽宁</el-checkbox>
                <el-checkbox v-model="checked5">河南</el-checkbox>
            </div>
        </div>

        <div v-else></div>

        <!-- 分割线 -->
        <el-divider></el-divider>

        <div>
            <div>
                <span>【参考答案】</span>:
                <el-button type="danger" size="mini" @click="onVideo">视频答案预览</el-button>
            </div>

            <div v-if="videoShow">
                <video :src="previewData.videoURL" controls></video>
            </div>
        </div>

        <!-- 分割线 -->
        <el-divider></el-divider>

        <div class="answerAnalysis a">
            <span>【答案解析】</span>:<span v-html="previewData.answer"></span>
        </div>

        <!-- 分割线 -->
        <el-divider></el-divider>

        <div class="answerAnalysis">
            <span>【题目备注】</span>:<span v-html="previewData.remarks"></span>
        </div>

    </div>

</template>

<script>
export default {
    name: 'previewSingleChoice',
    //导入组件
    components: {},
    //传递数据
    props: {
        previewData: {
            type: Object,
        },
    },
    //数据存储
    data() {
        return {
            videoShow: false, //视频播放标签的显示与隐藏
            radio: '1',
            checked: true,
            checked1: 1,
            checked2: 2,
            checked3: 3,
            checked4: 4,
            checked5: 5,
        }
    },
    //事件处理函数
    methods: {
        onVideo() {
            if (this.previewData.videoURL) {
                this.videoShow = true
            } else {
                this.$message('此题没有视频')
            }
        },
    },
    //事件监听函数
    watch: {},
    //计算属性
    computed: {},
    //生命周期函数
    created() {},
}
</script>

<style lang='less' scoped>
// .preview-singleChoice {
//     height: 600px;
// }
.singleChoice-header {
    display: flex;
    flex-wrap: wrap;

    /deep/.information {
        width: 160px;
        margin: 20px;
    }
}
.el-radio {
    margin: 15px;
    display: block;
}
.answerAnalysis {
    display: flex;
    align-items: center;
}

.el-checkbox {
    margin: 15px;
    display: block;
}

video {
    width: 300px;
    height: 200px;
}
</style>